<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="${pageContext.request.contextPath}/front/css/login.css" rel="stylesheet" type="text/css" />
		<link href="${pageContext.request.contextPath}/front/css/page_bottom.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<%@include file="../common/head1.jsp"%>
		<div class="login_step">
			注册步骤:
			<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
		</div>
		<div class="fill_message">
			<form name="ctl00" method="post" action="${pageContext.request.contextPath}/front/user/register" id="f" >
				<h2>
					以下均为必填项&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					${param.errorMsg}
				</h2>
				<table class="tab_login" >
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input name="user.email"  type="text" id="txtEmail" class="text_input"/>
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
								<span id="emailInfo">
									<img src="" id="img1"/>
									<span id="sp1"></span>
								</span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input name="user.nickname"  type="text" id="txtNickName" class="text_input" />
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="nameInfo">
									<img src="" id="img2"/>
									<span id="sp2"></span>
								</span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="user.password" type="password" id="txtPassword" class="text_input" />
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="passwordInfo">
									<img src="" id="img3"/>
									<span id="sp3"></span>
								</span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="password1" type="password" id="txtRepeatPass" class="text_input"/>
							
							<div class="text_left" id="repeatPassValidMsg">
								<span id="password1Info">
									<img src="" id="img4"/>
									<span id="sp4"></span>
								</span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
							<img class="yzm_img" id='imgVcode' src="${pageContext.request.contextPath}/validateCode.png" />
							<input name="validateCode" type="text" id="txtVerifyCode" class="yzm_input"/>
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
									<a href="javascript:changeImage()" id="change" >看不清楚？换个图片</a>
									<br/>
									<span id="codeInfo"></span>
								</p>
							</div>
						</td>
					</tr>
				</table>
				<div class="login_in">
					<input id="btnClientRegister" class="button_1" name="submit"  type="submit" value="注 册"/>
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	<script type="text/javascript">
		$("#imgVcode").click(function () {
			$(this).prop("src","${pageContext.request.contextPath}/validateCode.png?time="+new Date().getTime());
		})
		function changeImage() {
			$("#imgVcode").prop("src","${pageContext.request.contextPath}/validateCode.png?time="+new Date().getTime());
		}
		$(function () {
			$("input[name='user.email']").blur(checkEmail);
			$("input[name='user.nickname']").blur(checkNickname);
			$("input[name='user.password']").blur(checkPassword);
			$("input[name='password1']").blur(checkRepeatPassword);
			$("form").submit(checkSubmit);
		})

		function checkSubmit() {
			var r1 = checkEmail();
			var r2=checkNickname();
			var r3 = checkPassword();
			var r4=checkRepeatPassword();
			return r1 && r2&&r3&&r4;
		}
		function checkEmail() {
			var email=$("input[name='user.email']");
			eval("var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;");
			if (RegExp(reg).test(email.val())) {
				$("#img1").prop("src","${pageContext.request.contextPath}/front/images/success.png").css("width","16px")
						.css("height","16px");
				$("#sp1").html("邮箱格式正确").css("color","green");
				return true;
			}else {
				$("#img1").prop("src","${pageContext.request.contextPath}/front/images/error.png").css("width","16px")
						.css("height","16px");
				$("#sp1").html("邮箱格式不正确").css("color","red");
				return false;
			}
		}
		function checkNickname() {
			var nickname=$("input[name='user.nickname']");
			if(nickname.val().trim().length<=0){
				$("#img2").prop("src","${pageContext.request.contextPath}/front/images/error.png").css("width","16px")
						.css("height","16px");
				$("#sp2").html("昵称不能为空").css("color","red");
				return false;
			}else {
				$("#img2").prop("src","${pageContext.request.contextPath}/front/images/success.png").css("width","16px")
						.css("height","16px");
				$("#sp2").html("昵称格式正确").css("color","green");
				return true;
			}
		}
		function checkPassword() {
			var password=$("input[name='user.password']");
			if(password.val().trim().length<6){
				$("#img3").prop("src","${pageContext.request.contextPath}/front/images/error.png").css("width","16px")
						.css("height","16px");
				$("#sp3").html("密码长度最少为6位").css("color","red");
				return false;
			}else {
				$("#img3").prop("src","${pageContext.request.contextPath}/front/images/success.png").css("width","16px")
						.css("height","16px");
				$("#sp3").html("密码格式正确").css("color","green");
				return true;
			}
		}
		function checkRepeatPassword() {
			var password=$("input[name='user.password']");
			var password1=$("input[name='password1']");
			if(password1.val()!==password.val()){
				$("#img4").prop("src","${pageContext.request.contextPath}/front/images/error.png").css("width","16px")
						.css("height","16px");
				$("#sp4").html("两次密码不一致").css("color","red");
				return false;
			}else {
				$("#img4").prop("src","${pageContext.request.contextPath}/front/images/success.png").css("width","16px")
						.css("height","16px");
				$("#sp4").html("两次密码一致").css("color","green");
				return true;
			}
		}
	</script>
	</body>
</html>

